﻿<UserControl x:Class="Framework.UI.TestHarness.Views.PanelsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
             xmlns:params="http://schemas.codeplex.com/elysium/params"
             xmlns:extra="http://schemas.extra.com/ui"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
        
            <StackPanel>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="Grid"/>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource NormalTextStyle}" 
                           Text="Use a Grid in allmost all places as it takes up all space given to it and results in a better layout. You can also use a horizontal or vertical GridSplitter."/>
            </StackPanel>
        
            <Grid Grid.Row="1"
                  Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
        
                <Border>
                    <TextBlock HorizontalAlignment="Center" Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                               Style="{StaticResource HeaderTextStyle}" 
                               Text="VerticalGridSplitter"
                               VerticalAlignment="Center"/>
                </Border>
        
                <Border Grid.Column="2">
                    <TextBlock HorizontalAlignment="Center" Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                               Style="{StaticResource HeaderTextStyle}" 
                               Text="VerticalGridSplitter"
                               VerticalAlignment="Center"/>
                </Border>
        
                <GridSplitter Grid.Column="1" 
                              Style="{StaticResource VerticalGridSplitterStyle}"/>
        
            </Grid>
        
            <Grid Grid.Row="2"
                  Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
        
                <Border>
                    <TextBlock HorizontalAlignment="Center" Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                               Style="{StaticResource HeaderTextStyle}" 
                               Text="HorizontalGridSplitter"
                               VerticalAlignment="Center"/>
                </Border>
        
                <Border Grid.Row="2">
                    <TextBlock HorizontalAlignment="Center" Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                               Style="{StaticResource HeaderTextStyle}" 
                               Text="HorizontalGridSplitter"
                               VerticalAlignment="Center"/>
                </Border>
        
                <GridSplitter Grid.Row="1" 
                              Style="{StaticResource HorizontalGridSplitterStyle}"/>
        
            </Grid>
        
            <StackPanel Grid.Row="3">
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="StackPanel and WrapPanel"/>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource NormalTextStyle}" 
                           Text="Use a StackPanel or WrapPanel only when you want to make its contents as small as possible as these panels compress its contents."/>
            </StackPanel>
        
            <StackPanel Grid.Row="4">
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="DockPanel"/>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource NormalTextStyle}" 
                           Text="Avoid using DockPanel as its a hangover from Winforms and a Grid can do everything better."/>
            </StackPanel>
        
            <StackPanel Grid.Row="5">
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="AnimatedWrapPanel"/>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource NormalTextStyle}" 
                           Text="Use this where the size of the panel changes regularly and you want the items to animate. Can be used in place of a wrap panel. Use the AnimationStartX and AnimationStartY properties to set where to animate in from."/>
                <ItemsControl Focusable="False"
                              Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}">
                    <ItemsControl.ItemsSource>
                        <collections:ArrayList>
                            <system:String>Red</system:String>
                            <system:String>Yellow</system:String>
                            <system:String>Green</system:String>
                            <system:String>Blue</system:String>
                        </collections:ArrayList>
                    </ItemsControl.ItemsSource>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <extra:AnimatedWrapPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{Binding}"
                                    Height="50"
                                    Width="50"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        
            <StackPanel Grid.Row="6">
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="VirtualizingWrapPanel"/>
                <TextBlock Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                           Style="{StaticResource NormalTextStyle}" 
                           Text="Like the VirtualizingStackPanel, this panel can be used to improve performance by only rendering the items displayed on the screen."/>
                <ItemsControl Focusable="False"
                              Height="50"
                              Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}">
                    <ItemsControl.ItemsSource>
                        <collections:ArrayList>
                            <system:String>Red</system:String>
                            <system:String>Yellow</system:String>
                            <system:String>Green</system:String>
                            <system:String>Blue</system:String>
                        </collections:ArrayList>
                    </ItemsControl.ItemsSource>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <extra:VirtualizingWrapPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{Binding}"
                                    Height="50"
                                    Width="50"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        
        </Grid>
    </ScrollViewer>
</UserControl>
